<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/bootstrap.css"/>
    <link rel="stylesheet" href="${pageContext.request.contextPath}/css/addBook.css"/>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath}/js/bootstrap.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery.js"></script>
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/ajaxfileupload.js"></script>
</head>

<script type="text/javascript">
    function fileChange() {
        $.ajaxFileUpload({
            url: "${pageContext.request.contextPath}/prod/addImgWithAJAX.action",
            secureuri: false,
            fileElementId: 'pimage',// 就是controller层。MultipartFile 的名字！！！！！1
            dataType: "json",
            success: function (obj) {
                //清空div
                $("#imgDiv").empty();
                //创建一个图片的标签
                var imgObj = $("<img>");
                console.log(obj.imgurl); // 49ca0e8fe0414d868365cb256bec61f1.jpg
                // eg:  http://localhost:8080/mimiSSM_war/image_big/423rwef23523wr.png
                imgObj.attr("src", "/mimiSSM_war/image_big/" + obj.imgurl);
                imgObj.attr("width", "100px");
                imgObj.attr("height", "100px");
                //将图片追加到imgDiv
                $("#imgDiv").append(imgObj);
            },
            error:function (){
                console.log("失败")
            }
        });
    }
</script>
<body>
<!--取出上一个页面上带来的page的值-->

<div id="addAll">
    <div id="nav">
        <p>商品管理>新增商品</p>
    </div>

    <div id="table">
        <form id="myform" action="${pageContext.request.contextPath}/prod/save.action">
            <table>
                <tr>
                    <td class="one">商品名称</td>
                    <td><input type="text" name="pName" class="two"></td>
                </tr>
                <!--错误提示-->
                <tr class="three">
                    <td class="four"></td>
                    <td><span id="pnameerr"></span></td>
                </tr>
                <tr>
                    <td class="one">商品介绍</td>
                    <td><input type="text" name="pContent" class="two"></td>
                </tr>
                <!--错误提示-->
                <tr class="three">
                    <td class="four"></td>
                    <td><span id="pcontenterr"></span></td>
                </tr>
                <tr>
                    <td class="one">定价</td>
                    <td><input type="number" name="pPrice" class="two"></td>
                </tr>
                <!--错误提示-->
                <tr class="three">
                    <td class="four"></td>
                    <td><span id="priceerr"></span></td>
                </tr>

                <tr>
                    <td class="three">图片介绍</td>
                    <td><br>
                        <div id="imgDiv" style="display:block; width: 40px; height: 50px;"></div>
                        <br><br><br><br>
                        <input type="file" id="pimage" name="pimage" onchange="fileChange()">
                        <span id="imgName"></span><br>

                    </td>
                </tr>
                <tr class="three">
                    <td class="four"></td>
                    <td><span></span></td>
                </tr>

                <tr>
                    <td class="one">总数量</td>
                    <td><input type="number" name="pNumber" class="two"></td>
                </tr>
                <!--错误提示-->
                <tr class="three">
                    <td class="four"></td>
                    <td><span id="numerr"></span></td>
                </tr>


                <tr>
                    <td class="one">类别</td>
                    <td>
                        <select name="typeId">
                            <c:forEach items="${typeList}" var="type">
                                <option value="${type.typeId}">${type.typeName}</option>
                            </c:forEach>
                        </select>
                    </td>
                </tr>

                <!--错误提示-->
                <tr class="three">
                    <td class="four"></td>
                    <td><span></span></td>
                </tr>

                <tr>
                    <td>
                        <input type="submit" value="提交" class="btn btn-success">
                    </td>
                    <td>
                        <input type="reset" value="取消" class="btn btn-default" onclick="myclose(${param.page})">
                        <script type="text/javascript">
                            function myclose(ispage) {
                                window.location = "${pageContext.request.contextPath}/prod/split.action?page=" + ispage;
                            }
                        </script>
                    </td>
                </tr>
            </table>
        </form>
    </div>
</div>

</body>

</html>